<template>
  <div class="register">
    <div class="register-from">
      <div class="register-logo-wrap">
        <div class="register-logo">
          <img
            src="../assets/logo.png"
            mode="aspectFit"
			@click="goDownload"
          >
        </div>
      </div>
			
      <div class="from">
        <div class="register-from-wrap">
          <div class="field-item">
            <div class="field-item-title">
              真实姓名
            </div>
            <field
              v-model="from.realName"
              clearable
              placeholder="请输入您的真实姓名"
            />
          </div>
          <div class="field-item">
            <div class="field-item-title">
              手机号码
            </div>
            <field
              v-model="from.phone"
              clearable
              type="number"
              placeholder="手机号码"
            />
          </div>
          <div class="field-item">
            <div class="field-item-title">
              短信验证码
            </div>
            <field
              v-model="from.verification"
              clearable
              type="number"
              placeholder="验证码"
              use-button-slot
            >
              <div
                slot="button"
                class="register-from-sms"
                @click="sendCode"
              >
                {{ timer.text }}
              </div>
            </field>
          </div>
          <div class="field-item">
            <div class="field-item-title">
              设置登录密码
            </div>
            <field
              v-model="from.password"
              clearable
              type="password"
              placeholder="6-20位,由字母/数字/下划线组成"
            />
          </div>
		  <div class="field-item">
		    <div class="field-item-title">
		      确认登录密码
		    </div>
		    <field
		      v-model="from.password2"
		      clearable
		      type="password"
		      placeholder="确认您的登录密码"
		    />
		  </div>
          <div class="field-item">
            <div class="field-item-title">
              设置二级密码
            </div>
            <field
              v-model="from.payPassword"
              clearable
              type="password"
              placeholder="6-20位,由字母/数字/下划线组成"
            />
          </div>
		  <div class="field-item">
		    <div class="field-item-title">
		      确认二级密码
		    </div>
		    <field
		      v-model="from.payPassword2"
		      clearable
		      type="password"
		      placeholder="确认您的二级密码"
		    />
		  </div>
          <div class="field-item">
            <div class="field-item-title">
              邀请人
            </div>
            <field
              v-model="from.invite"
              clearable
              type="number"
              placeholder="邀请人手机号码"
            />
          </div>
        </div>
        <div class="register-btn">
          <buttons
            class="register-btn-reset"
            :loading="loading"
            @click="onSubmit"
          >
            注册
          </buttons>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import * as reg from '../assets/reg.js';
/* eslint-enable */
import Field from 'vant/lib/field';
import Buttons from 'vant/lib/button';
import Toast from 'vant/lib/toast';
import 'vant/lib/button/style';
import 'vant/lib/field/style';
import 'vant/lib/cell-group/style';
import 'vant/lib/toast/style';
import axios from 'axios'
export default {
	name: 'Home',
	components: {
		Field,
		Buttons
	},
	data() {
		return {
			url: 'http://39.108.60.14:10039',
			loading: false,
			className: false,
			dayNo: false,
			onSMS: false,
			from: {
				realName: '',
				phone: '',
				verification: '',
				password: '',
				password2: '',
				payPassword: '',
				payPassword2: '',
				invite: ''
			},
			timer: {
				func: '',
				count: '',
				text: '获取'
			} // 倒计时
		}
	},
	watch: {
	},
	created () {
		this.isWeiXin()
		this.from.invite = this.getQueryString('code')
		this.timer.count = Number(localStorage.getItem('bht_SMS')) || 0
		this.setTimer(this.timer.count)
	},
	methods: {
				isWeiXin() {
			const ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				this.className = true;
			} else {
				this.className = false;
			}
		},
		getSMS () {
			if (this.onSMS) return
			if (this.timer.count > 0) return
			this.onSMS = true
			const dates = +new Date()
			let bht_SMS_sum = JSON.parse(localStorage.getItem('bht_SMS_sum') || "[]")
			if (bht_SMS_sum.length >= 4) {
				const t = bht_SMS_sum[3].replace('bht_', '') // 最后时间戳
				const vt = Number(t)+24*60*60*1000
				if (vt <= dates) {
					bht_SMS_sum = []
					bht_SMS_sum.push('bht_'+dates)
					localStorage.setItem('bht_SMS_sum', JSON.stringify(bht_SMS_sum));
					this.dayNo = false
				} else {
					Toast('今日发送次数上限')
					this.dayNo = true
				}
			} else {
				bht_SMS_sum.push('bht_'+dates)
				localStorage.setItem('bht_SMS_sum', JSON.stringify(bht_SMS_sum))
				this.dayNo = false
			}
		},
		setTimer (bht_SMS) {
			if (bht_SMS <= 0) return
			localStorage.setItem('bht_SMS',  bht_SMS || 59)
			this.timer.func = setInterval(() => {
				this.timer.count = Number(localStorage.getItem('bht_SMS'));
				this.timer.count--
				localStorage.setItem('bht_SMS', this.timer.count)
				this.timer.text = this.timer.count + 's';
				if (this.timer.count <= 0) {
					this.timer.text = '获取';
					this.onSMS = false
					localStorage.setItem('bht_SMS', 0)
					clearInterval(this.timer.func);
				}
			}, 1000);
		},
		sendCode() {
			if (this.timer.count > 0) return
			// 获取短信
			const regPhone = reg.regPhone(this.from.phone);
			if (regPhone) {
				Toast(regPhone)
				return;
			}
			this.getSMS()
			if (this.dayNo) return
			return new Promise((resolve, reject) => {
				axios.post(`${this.url}/app/auth-code`, {
					phone: this.from.phone
				})
				.then((res) => {
					if (res.data.success) {
						Toast('发送成功')
						this.setTimer(59)
						return;
					}
					Toast(res.data.errMsg)
				})
				.catch((err) => {
					Toast('网络异常')
				})
			})
		},
		onSubmit () {
			if (this.loading) return;
			const regSubmit = reg.regSubmit(this.from);
			if (regSubmit) {
				Toast(regSubmit)
				return;
			}
			this.loading = true;
			axios.post(`${this.url}/app/register`,{
				name: this.from.realName,
				phone: this.from.phone,
				authCode: this.from.verification,
				pwd: this.from.password,
				pwdtow: this.from.payPassword,
				rephone: this.from.invite
			})
			.then((res) => {
				const data = res.data
				this.loading = false
				if (data.success) {
					Toast('注册成功，请下载APP')
					this.$router.push({path: '/download'})
						return
					}
					Toast(res.data.errMsg)
			})
			.catch((err) => {
				Toast('网络异常')
			})
		},
		goDownload () {
			this.$router.push({path: '/download'})
		},
		getQueryString(id) { 
			const url = window.location.href;
			const regstr = "/(\\?|\\&)" + id + "=([^\\&]+)/";
			const reg = eval(regstr);
			const result = url.match(reg);
			if (result && result[2]) {
					return result[2];
			}
   		 }
	}
};
</script>
<style lang="scss" scoped>
img {
	width: 100%;
}

.register {
	min-height: 100vh;
	padding-bottom: .8rem;
	background-color: #fff;
	position: relative;
	&-logo-wrap {
		padding: .4rem;
	}
	&-logo {
		width: 1rem;
		height: 1rem;
		margin: auto;
		text-align: center;
	}
	&-title {
		padding: 0 .1rem;
		font-size: .4rem;
		font-weight: 600;
		margin-bottom: .3rem;
	}
	.field-item {
		margin-bottom: .1rem;
		&-title {
			padding-left: .15rem;
			margin-bottom: .1rem;
			font-size: .16rem;
			color: #1E1E1E;
		}
	}
}
.register {
	&-from {
		padding-bottom: .1rem;
	}
	&-btn {
		position: fixed;
		right: 30px;
		bottom: 30px;
		left: 30px;
		z-index: 99;
		&-reset {
				display: block;
				width: 100%;
				height: .4rem;
				line-height: .4rem;
				margin-top: .4rem;
				text-align: center;
				color: #424242;
				border: 0 !important;
				color: #fff;
				background-color: #3E527E;
				border-radius: .05rem !important;
				box-shadow: 0 0.02rem 0.06rem #ddd;
			}

	}
}
.activeSMS {
	color: #e1e1e1;
}

</style>
